<script setup lang="ts">
import {ref} from "vue";
import {showFailToast, showToast} from "vant";
import router from "@/router";

const searchTxt = ref('');
// 已选中的标签
const activeIds = ref([]);
const activeIndex = ref(0);

const onSearch = (val: any) => {
/*  if (!searchTxt.value) {
    showToast({
      message: '顶部展示',
      position: 'top',
    });
    return;
  }*/
  // 扁平化数组
  tagsList.value = originTags.map(parentTag => {
    const tempChildren = [...parentTag.children];
    const tempParentTag = {...parentTag};
    tempParentTag.children = tempChildren.filter(item => item.text.includes(searchTxt.value));
    return tempParentTag;
  })
};

const show = ref(true);
// 移除标签事件
const doClose = (tag: any) => {
  activeIds.value = activeIds.value.filter(item => {
    return item !== tag;
  })
};

const doSearchResult = () => {
  router.push({
    path: '/user/list',
    query: {
      tags: activeIds.value,
    }
  })

}

const onCancel = () => {
  searchTxt.value = '';
  tagsList.value = originTags;
};

const originTags = [
  {
    text: '性别',
    children: [
      {text: '男', id: '男'},
      {text: '女', id: '女'},
    ],
  },
  {
    text: '学历',
    children: [
      {text: '大一', id: '大一'},
      {text: '大二', id: '大二'},
      {text: '大三', id: '大三'},
    ],
  },
  {
    text: '技术',
    children: [
      {text: 'java', id: 'java'},
      {text: 'python', id: 'python'},
      {text: 'c++', id: 'c++'},
    ],
  },
]


// 可选标签
const tagsList = ref(
    originTags
)
</script>

<template>
  <div>
    <form action="/">
      <van-search
          :autofocus="true"
          v-model="searchTxt"
          shape="round"
          clearable
          show-action
          placeholder="请输入搜索的标签："
          @search="onSearch(activeIds)"
          @cancel="onCancel"
      />
    </form>

    <div style="padding: 5px">
      <van-divider content-position="left" :style="{ color: '#1989fa', borderColor: '#1989fa' }">
        已选标签
      </van-divider>
      <div v-if="activeIds.length === 0" style="font-size: 12px">暂无选中的标签...</div>
      <div style="padding: 5px">
        <van-row :gutter="[10, 2]">

          <van-col v-for="tag in activeIds" span="4">
            <van-tag :show="show" closeable size="medium" type="primary" @close="doClose(tag)">
              {{ tag }}
            </van-tag>
          </van-col>
        </van-row>
      </div>

      <van-divider vertical :style="{ color: 'black', padding: '0' }"/>
      请选择标签：

      <div>
        <van-tree-select
            v-model:active-id="activeIds"
            v-model:main-active-index="activeIndex"
            :items="tagsList"
        />
      </div>
      <!--  搜索按钮-->
      <div style="display: flex; align-items: center; justify-content: center; margin-top: 10px">
        <van-button hairline  style="width: 100%; text-align: center;" type="primary" @click="doSearchResult()">搜 索</van-button>
      </div>
    </div>
  </div>


</template>

<style scoped>
.van-divider:deep .van-divider {
  /*
  display: flex;
  */
  align-items: center;
  margin: var(--van-divider-margin);
  color: var(--van-divider-text-color);
  font-size: var(--van-divider-font-size);
  line-height: var(--van-divider-line-height);
  border-color: var(--van-divider-border-color);
  border-style: solid;
  border-width: 0;
}

.van-sidebar:deep .van-sidebar {
  /* flex: 1; */
  overflow-y: auto;
  background: var(--van-tree-select-nav-background);
  -webkit-overflow-scrolling: touch;
}
</style>
